<template>
	<view>
		<view class="u-flex u-flex-wrap">
			<view v-if="list.length != max" @click="upload" class="upload">
				<!-- <u-icon size="56" name="plus"></u-icon>
				<text>{{placeholder}}</text>
				 -->
				<u-image v-show="filetype === 'image'" src="@/static/upload_image.png" width="200rpx" height="200rpx">
				</u-image>
				<u-image v-show="filetype === 'video'" src="@/static/upload_video.png" width="200rpx" height="200rpx">
				</u-image>
				<u-image v-show="filetype === 'file'" src="@/static/upload.png" width="200rpx" height="200rpx">
				</u-image>
			</view>

			<view class="img-box" v-show="list && list.length" v-for="(item,index) in list" :key="item.url">
				<view @click="remove(index)" class="delete">
					<u-image src="@/static/index/remove.png" width="12px" height="12px"></u-image>
				</view>
				<video class="video" v-if="item.filetype ==='video' || filetype === 'video'" :src="item.url"></video>
				<u-image border-radius="6px" v-if="item.filetype ==='image' || filetype === 'image'"
					@click="previewImage(item)" width="200rpx" height="200rpx" :src="item.url">
				</u-image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/config';
	export default {
		name: "upload",
		props: {
			value: { // 图片列表或视频列表
				type: Array,
				default: []
			},
			placeholder: {
				type: String,
				default: '选择图片'
			},
			max: { // 上传最大数量
				type: Number,
				default: 1
			},
			dir: { // 上传的文件夹后端需要
				// 轮播图：carousel
				// 领养：adopt
				// 申请领养：adopt_apply
				// 寻宠：find_pet
				// 寻主：find_master
				// 黑名单：blacklist
				// 社区发帖：community
				// 用户头像：avatar
				// 富文本图片：richtext
				type: String,
				default: 'community'
			},
			filetype: { // 上传的文件类型 取值：image,video,file
				type: String,
				default: 'image'
			}
		},
		data() {
			return {
				list: [],
				// list: [{
				// 	url: 'http://zaiyuan.oss-cn-chengdu.aliyuncs.com/adopt/3c934503ab119b21692201ab93d0d8db.mp4'
				// }]
			};
		},
		methods: {
			previewImage(item) {
				const urls = this.list.map(item => item.url);
				uni.previewImage({
					current: item.url,
					urls
				})
			},
			remove(index) {
				this.list.splice(index, 1);
				this.$emit('input', this.list);
			},
			upload() {
				// 领养申请上传只能传一张
				if (this.filetype === 'image') {
					uni.chooseImage({
						count: this.max,
						success: async (res) => {
							let filePaths = res.tempFilePaths
							filePaths = filePaths.slice(0, this.max - this.list.length);
							this.batchUpload(filePaths);
						}
					})
				}
				if (this.filetype === 'video') {
					uni.chooseVideo({
						success: async (res) => {
							// 视频每次只能上传一个，但这里也和图片做同样的处理
							const filePaths = [res.tempFilePath]; // 注意这里视频和图片字段不一样
							if (this.list.length === this.max) {
								return;
							}
							this.batchUpload(filePaths);
						}
					})
				}

				if (this.filetype === 'file') {
					uni.chooseMedia({
						count: this.max,
						success: (res) => {
							let filePaths = res.tempFiles.map(item => item.tempFilePath);
							filePaths = filePaths.slice(0, this.max - this.list.length);
							this.batchUpload(filePaths, res.type);
						}
					});
				}

			},
			batchUpload(filePaths, chooseFileType) {
				let title = '';
				switch (chooseFileType || this.filetype) {
					case 'image':
						title = '图片上传中';
						break;
					case 'video':
						title = '视频上传中';
						break;
					default:
						title = '文件上传中';
						break;
				}
				uni.showLoading({
					title,
					mask: true
				});
				for (let i = 0; i < filePaths.length; i++) {
					uni.uploadFile({
						url: baseUrl + '/common/uploads/upload',
						filePath: filePaths[i],
						name: 'file',
						formData: {
							dir: this.dir,
							filetype: chooseFileType || this.filetype
						},
						success: (sub) => {
							this.pushList(sub, chooseFileType);
						}
					})
				}
			},
			pushList(sub, chooseFileType) {
				uni.hideLoading();
				const imgInfo = JSON.parse(sub.data).data;
				this.list.push({
					id: 0,
					filetype: chooseFileType || this.filetype,
					attachment: imgInfo.filename,
					url: imgInfo.filepath
				});
				this.$emit('input', this.list);
			}
		},
		watch: {
			value(val) {
				this.list = val;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.img-box {
		position: relative;
		margin-right: 30rpx;
		margin-bottom: 20rpx;
		height: 200rpx;

		.delete {
			display: inline-block;
			position: absolute;
			right: 10rpx;
			top: 0;
			z-index: 1;
		}

	}

	.upload {
		width: 200rpx;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #707070;
		font-size: 20rpx;
		margin-right: 30rpx;
		margin-bottom: 20rpx;
		border-radius: 6px;
	}

	.video {
		width: 200rpx;
		height: 200rpx;
		border-radius: 6px;
	}
</style>
